<template>
  <div class="box8">
    <div class="title">
      <p>数据统计</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

//获取图表DOM实例
let charts = ref()
let nameList = ['门票', '景观', '建筑', '文物', '项目'] // 名字
let valueList = [85, 80, 60, 76, 85] // 分数，最大值为100
let indicatorList: any = []
nameList.map((item, index) => {
  indicatorList.push({
    name: item,
    value: valueList[index],
    max: 100,
  })
})

//组件挂载完毕
onMounted(() => {
  //初始化echarts实例
  let mychart = echarts.init(charts.value)
  //配置对象
  let option = {
    radar: {
      // shape: 'circle',
      indicator: indicatorList,
      axisName: {
        formatter: function (value: any, indicator: any) {
          return `{a|${value}}`
        },
        rich: {
          a: {
            fontSize: '14px',
            fontFamily: ' Source Han Sans CN-Regular',
            fontWeight: 400,
            color: '#333333',
            padding: [0, 8, 0, 0],
          },
          b: {
            padding: [4, 8, 4, 8],
            backgroundColor: 'rgba(229, 243, 255, 0.6500)',
            borderRadius: 50,
            fontFamily: 'Source Han Sans CN-Medium',
            fontWeight: 500,
            color: '#397EF0',
          },
        },
      },
    },
    series: [
      {
        name: '雷达图',
        type: 'radar',
        color: 'rgba(57, 126, 240, 1)',
        label: {
          show: false,
        },
        areaStyle: {
          color: 'rgba(170, 217, 255, 0.35)',
        },
        data: [
          {
            value: valueList,
            name: 'Allocated Budget',
          },
        ],
      },
    ],
  }
  //设置echarts配置项
  mychart.setOption(option)
})
</script>

<style scoped lang="scss">
.box8 {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  margin-top: 10px;

  .title {
    p {
      color: #fff;
      font-size: 18px;
    }
  }

  .charts {
    height: calc(100% - 30px);
  }
}
</style>
